/**
 *  车辆档案
 */

import { useCallback, useEffect, useMemo, useState } from "react";
import SearchMoudle from "./components/SearchMoudle";
import { TitleBox, VehicleFileBox } from "./style"
import { Button, message, Table, Tabs } from "antd";
import { PlusOutlined } from '@ant-design/icons'

import { ColumnsType } from "antd/es/table";
import AddCar from "./components/AddCar";
import { getPrDelete, ISelectListType, ISelectType, postSelect } from "../api";

import ChangeWeight from "./components/ChangeWeight";
import { TablePaginationPosition } from "../../../type/antd";
import { IFenye } from "../../../type/commit";
import { useWindowFontSize } from "../../../assets/fun/Antd/configprovider";
import { handleDeleteAssets } from "../../../assets/fun/Antd/deleteFun";


const VehicleFilePage = () => {
    const [listData, setListData] = useState<ISelectListType[]>([]); //列表数据
    const [selectValue, setSelectValue] = useState<ISelectType>(); //选中的数据 搜索参数
    const [addOpenShow, setAddOpenShow] = useState<boolean>(false); //新增弹窗
    const [changeShow,setChangeShow] = useState<boolean>(false)
    const [carOpenData, setCarOpenData] = useState<ISelectListType>(); //修改弹窗数据
    const [totalValue, settotalValue] = useState(0); //总条数
    const contentValue: TablePaginationPosition = "bottomCenter";
    const [paging, setPaging] = useState({
        // 分页数据
        currentPage: 1,
        pageSize: 10,
    });
    //Tabs的items的内部表格组件
    const pagination = {
        //分页
        position: [contentValue],
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${totalValue}条`,
        //每页条数
        pageSize: paging.pageSize,
        //当前页数
        current: paging.currentPage,
        //数据总数
        total: totalValue,
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current: number, pageSize: number) => {
            setPaging({
                currentPage: current,
                pageSize: pageSize,
            });
        },
    };

    //搜索的回调函数
    const handleSearchCallback = (value?: any) => {
        setPaging({
            currentPage: 1,
            pageSize: 10,
        })
        setSelectValue(value)
    }

    const parames = useMemo(() => {
        return {
            ...paging,
            ...selectValue
        };
    }, [paging, selectValue]);

    const listFun = useCallback(async () => {
        const { code, msg, data } = (await postSelect(parames)) as IFenye<ISelectListType>
        if (code === 20000) {
            setListData(data.records);
            settotalValue(data.total)

        } else {
            message.error(msg);
        }
    }, [parames]);

    useEffect(() => {
        listFun()
    }, [listFun])

    const columns: ColumnsType<ISelectListType> = [
        {
            title: "序号",
            align: "center",
            render: (text, record, index) => <span>{(paging.currentPage - 1) * paging.pageSize + index + 1}</span>
        },
        {
            title: "货品",
            align: "center",
            dataIndex: "good",
        },
        {
            title: "车牌号",
            align: "center",
            render: (text, record, index) => <span>{record.carColor}{record.carNum}</span>,
        },
        {
            title: "司机姓名",
            align: "center",
            dataIndex: "driverName",
        },
        {
            title: "手机号",
            align: "center",
            dataIndex: "telPhone",
        },
        {
            title: "空车重量(千克)",
            align: "center",
            dataIndex: "emptyWeight",
        },
        {
            title: "允许提货量(吨)",
            align: "center",
            dataIndex: "allowAmount",
        },
        {
            title: "剩余提货量(吨)",
            align: "center",
            dataIndex: "remainAmount",
        },
        {
            title: "操作",
            align: "center",
            width: useWindowFontSize(350),
            fixed: 'right',
            render: (_, record) => (
                <>
                    <Button type="link"
                    disabled={record.emptyWeight===0}
                        onClick={() => {
                            setChangeShow(true)
                            setCarOpenData(record)
                        }}
                    >修改空车重量</Button>
                    <Button type="link"
                        onClick={() => {
                            setAddOpenShow(true)
                            setCarOpenData(record)
                        }}
                    >编辑</Button>
                    <Button type="link"
                        onClick={() => {
                            handleDelete(record.id)
                        }}
                    >删除</Button>

                </>
            ),
        },
    ]

    const ListHtml = () => {
        return (
            <Table
                columns={columns}
                dataSource={listData}
                pagination={pagination}
                rowKey="id"
                scroll={{ x: "130rem" }}
            />
        );
    };

    const items = [
        {
            label: `全部`,
            key: "0",
            children: <ListHtml />,
        }
    ];

    const handleDelete = (value?: string) => {
        handleDeleteAssets(
            async () => {
                return (await getPrDelete({ id: value })) as {
                    code: number;
                    msg: string;
                };
            },
            () => {
                listFun();
            }
        );
    };

    const AddCallBack = () => {        
        setCarOpenData(undefined)
        listFun()
        setAddOpenShow(false)
    }

    const handleChangeWeight = () => {
        console.log(111111111111111);
        
        setCarOpenData(undefined)
        setChangeShow(false)
        listFun()
    }

    return (
        <VehicleFileBox>
            <TitleBox>
                <div>车辆档案</div>
            </TitleBox>
            <SearchMoudle
                handleSearchCallback={handleSearchCallback}
            ></SearchMoudle>
            <Tabs
                items={items}
                tabBarExtraContent={<>
                    <Button icon={<PlusOutlined />} type="primary" onClick={() => {
                        setAddOpenShow(true)
                        }}>
                        登记车辆
                    </Button>
                </>}
                style={{ marginTop: '3rem', backgroundColor: '#fff', paddingLeft: '2rem', paddingRight: '2rem' }}

            />
            {/* 增加修改车辆 */}
            <AddCar
                AddOpenShow={addOpenShow}
                AddCallBack={AddCallBack}
                CarOpenData={carOpenData}
            />
            {/* 修改空车重量 */}
            <ChangeWeight
                openShow={changeShow}
                handleCallBack={handleChangeWeight}
                objData={carOpenData}
                />
        </VehicleFileBox>
    )
}

export default VehicleFilePage;
